<template>
    <a-card style="margin-bottom: 10px">
        <a-form
            ref="formRef"
            layout="inline"
            :model="formState"
            @finish="handleFinish"
        >
            <a-form-item label="数据名称：" name="sjmc">
                <a-input v-model:value="formState.sjmc"></a-input>
            </a-form-item>
            <a-form-item label="数据数据提供厂商：" name="sjtgcs">
                <a-input v-model:value="formState.sjtgcs"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button
                    type="primary"
                    @click="handleFinish"
                    style="margin-right: 4px"
                >
                    <template #icon><SearchOutlined /></template>
                    搜索
                </a-button>
                <a-button @click="handleReset">
                    <template #icon><ReloadOutlined /></template>
                    重置
                </a-button>
            </a-form-item>
        </a-form>
    </a-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons-vue";
export default defineComponent({
    name: "AddressMatch",
    props: {
        formState: {
            type: Object,
        },
    },
    setup(props, { emit }) {
        const formRef = ref();
        const state = reactive({
            handleFinish: () => {
                emit("searchData", {
                    formState: props.formState,
                });
            },
            handleReset: () => {
                formRef.value.resetFields();
                emit("searchData", {
                    formState: props.formState,
                });
            },
        });
        return {
            formRef,
            props,
            ...toRefs(state),
        };
    },
    components: {
        SearchOutlined,
        ReloadOutlined,
    },
});
</script>